<template>
	<view>
		<view class="login">
			<image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
			<view class="userInfoInput">
				账号:<input @input="accountChange">
			</view>
			<view class="userInfoInput">
				密码:<input password="true" @input="passwordChange">
			</view>
			<view class="userInfoInput">
				验证码:<input @input="codeChange">
			</view>
			<button type="button" @click="getCode">获取验证码</button>
			
			<view class="detail">
				<view class="send" style="background-color: blue;" @click="loginOrRegister('register')">
					注册
				</view>
				<view class="send" style="background-color: #41A863;" @click="loginOrRegister('login')">
					登录
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		socket
	} from '../../utils/socket.js'
	import DB from 'utils/sqlite.js'
	export default {
		data() {
			return {
				userId: "",
				account: "",
				password: "",
				code: "",
				token: ""
			}
		},
		methods: {
			accountChange(e) {
				this.account = e.detail.value;
			},
			passwordChange(e) {
				this.password = e.detail.value;
			},
			codeChange (e) {
				this.code = e.detail.value;
			},
			getCode () {
				uni.request({
					url: getApp().url + 'sendEMail',
					data: {
						account: this.account
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == 0) {
							return uni.showToast({
								icon: "success",
								title: "验证码已发送",
							});
						};
						uni.showToast({
							icon: "error",
							title: response.data.msg
						});
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			// 登录or注册
			loginOrRegister(e) {
				if (e == "register") {
					if (this.account.length < 9 || this.account.length > 20) {
						uni.showToast({
							icon: "none",
							title: "账号的长度为9-20位"
						})
					} else if (this.password.length < 6) {
						uni.showToast({
							icon: "none",
							title: "密码必须大于六位"
						})
					} else if (this.code.length != 6) {
						uni.showToast({
							icon: "none",
							title: "验证码为六位"
						})
					} else {
						uni.request({
							url: getApp().url + 'user/register',
							data: {
								account: this.account,
								password: this.password,
								code: this.code
							},
							method: "GET",
							success: (response) => {
								if (response.data.code == 0) {
									return uni.showToast({
										icon: "success",
										title: "注册成功",
									});
								};
								uni.showToast({
									icon: "error",
									title: response.data.msg
								});
							},
							fail: (error) => {
								console.log(error);
							}
						})
					}

				} else if (e == "login") {
					uni.request({
						url: getApp().url + 'user/login',
						data: {
							account: this.account,
							password: this.password
						},
						method: "GET",
						success: (response) => {
							console.log(response);
							if (response.data.code == 0) {
								this.userId = response.data.data.userId;
								this.token = response.data.data.token;
								uni.setStorageSync("userId", response.data.data.userId);
								uni.setStorageSync("token", response.data.data.token);
								uni.setStorageSync("image", response.data.data.image);
								uni.setStorageSync("name", response.data.data.name);
								uni.setStorageSync("account", response.data.data.account);
								uni.setStorageSync("personalSignature", response.data.data.personalSignature);
								this.goToPersonIndex();
								DB.openSqlite();
								this.createTable();
								this.getFriend();
							} else {
								uni.showToast({
									icon: "error",
									title: response.data.msg
								});
							}

						},
						fail: (error) => {
							console.log(error);
						}
					})
				}
			},
			goToPersonIndex() {
				socket.constructor(getApp().wurl, 300000, uni.getStorageSync("userId"))
				uni.switchTab({
					url: "/pages/tabBar/list/list"
				})
			},
			// 创建表
			createTable() {
				let chatRecordsSql =
					'"id" INTEGER PRIMARY KEY AUTOINCREMENT,"type" INTEGER,"fromId" INTEGER,"toId" INTEGER,"msgType" INTEGER,"message" TEXT,"createTime" DATETIME';
				// 创建表 DB.createTable(表名, 表的列)
				DB.createTable("chatRecords_" + uni.getStorageSync("userId"), chatRecordsSql)
					.then(res => {
						console.log("创建chatRecords表成功");
					})
					.catch(error => {
						console.log("创建chatRecords表失败");
					});

				let chatListSql =
					'"id" INTEGER PRIMARY KEY,"type" INTEGER,"msgType" INTEGER,"lastMessage" TEXT,"createTime" DATETIME';
				// 创建表 DB.createTable(表名, 表的列)
				DB.createTable("chatList_" + uni.getStorageSync("userId"), chatListSql)
					.then(res => {
						console.log("创建chatList表成功");
					})
					.catch(error => {
						console.log("创建chatList表失败");
					});
			},
			getFriend() {
				uni.request({
					url: getApp().url + 'friend/getFriendImageList',
					data: {
						userId: uni.getStorageSync("userId")
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (res) => {
						if (res.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: res.data.msg
							});
						};
						console.log(res.data.data);
						uni.setStorageSync("friendImage", JSON.stringify(res.data.data));
					},
					fail: (error) => {
						console.log(error);
					}
				})
				
				uni.request({
					url: getApp().url + 'friend/getFriendNoteList',
					data: {
						userId: uni.getStorageSync("userId")
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (res) => {
						if (res.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: res.data.msg
							});
						};
						console.log(res.data.data);
						uni.setStorageSync("friendName", JSON.stringify(res.data.data));
					},
					fail: (error) => {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		height: 60vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.userInfoInput {
			width: 60vw;
			height: 50px;
			display: flex;
			align-items: center;

			input {
				border: 1px solid #B3B2AF;
			}
		}

		.logo {
			width: 30vw;
			height: 30vw;
		}
	}

	.detail {
		margin: 8vw 5vw;
		height: 40px;
		display: flex;

		.send {
			margin: 0 5vw;
			width: 25vw;
			height: 50px;
			border-radius: 25px;
			line-height: 50px;
			text-align: center;
			color: #FFF;
		}
	}
</style>